<template lang='pug'>
  .step-1
    .form-shebao-title.font-16.font-weight 参保信息
    //- Form(ref="formValidate" :model="formValidate" :label-width="100")
    //-   Row(type="flex" justify="start" :gutter="16")
    //-     Col(span="7")
    //-       FormItem(label="参保类型：")
    //-         Select.input-has-border(v-model="formValidate.SecurityType"  placeholder="请选择" style="width:100%" label-in-value clearable @on-change="SecurityTypeChange")
    //-           Option(v-for="(item, index) in securityType_arr" :value="item.value" :key="index") {{ item.label }}
    //-     Col(span="7")
    //-       FormItem(label="参保地区：")
    //-         Cascader.input-has-border(v-model="createAreaArr" placeholder="请选择" :filterable="true" :data="getAreaArr()" :change-on-select="true" :load-data="loadDataCity" style="width:100%;" @on-change="createAreaChange" @on-visible-change="createAreaVisibleChange" :disabled="createAreaDisabled")
    //-     Col(span="7")
    //-       FormItem.ivu-form-item-required(label="参保编号：")
    //-         Select.input-has-border(v-model="formValidate.InsuranceCode" filterable  placeholder="请选择" style="width:100%" :disabled="SecurityTypeDisabled" @on-change="InsuranceCodeChange" clearable)
    //-           Option(v-for="(item, index) in insuranceCode_arr" :value="item.securityNO" :key="index") {{ item.securityNO }}
    //-     Col(span="3")
    //-       Button(type="info" :disabled="createBtnDis" @click="createSecurityType") 添加
    Table.hasTitle-table.beautiful-table(:columns="createSecurityThead" :data="securityTableData" :stripe="true")
      template(slot-scope="{ row, index }" slot="operation")
        Button(type="text" @click="cancelSecurity(index)") 删除   
</template>

<script>
import dataApi from '@/api/data'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
  name:'stpe_2',
  props:{
    customerId: String
  },
  inject: ['getAreaArr'],
  data () {
    return {
      createAreaDisabled: true,
      createBtnDis: true,
      SecurityTypeDisabled: true,
      securityType_arr: [
        { label: '社保', value: 1 },
        { label: '公积金', value: 2 },
        { label: '商保', value: 3 }
      ],
      createAreaArr: [],
      insuranceCode_arr: [],
      securityTableData: [], // 参保信息列表
      createSecurityThead: [ // 参保信息表头
        {
          title: '参保地区',
          minWidth: 150,
          key: 'CityName'
        },
        {
          title: '类型',
          minWidth: 100,
          key: 'SecurityTypeName'
        },
        {
          title: '编号',
          minWidth: 100,
          key: 'InsuranceCode'
        },
        {
          title: '操作',
          minWidth: 100,
          slot: 'operation',
          align: 'center'
        }
      ],
      // 基本信息
      formValidate: {
        CityId: '', // 参保区域
        CityName: '', // 地区名称
        SecurityType: '', // 参保类型
        SecurityTypeName: '', // 参保类型名称
        InsuranceCode: '' // 参保编号
      }
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 获取参保编号
    getSecurityNo () {
      dataApi.getSecurityNoList({
        securityNo: '',
        areaGUID: this.formValidate.CityId,
        securityType: this.formValidate.SecurityType,
        pageIndex: 1,
        pageSize: 10000
      }).then((res) => {
        console.log(res)
        this.insuranceCode_arr = res.data.data
      })
    },
    // 参保类型选择
    SecurityTypeChange (val) {
      if (val) {
        this.formValidate.SecurityType = val.value
        this.formValidate.SecurityTypeName = val.label
        this.createAreaDisabled = true
        this.createAreaArr = []
        this.formValidate.CityId = ''
        this.formValidate.CityName = ''
        this.formValidate.InsuranceCode = ''
        switch (val.value) {
          case 1:
            this.createAreaDisabled = false
            this.SecurityTypeDisabled = true
            this.insuranceCode_arr = []
            break
          case 2:
            this.createAreaDisabled = false
            this.SecurityTypeDisabled = true
            this.insuranceCode_arr = []
            break
          case 3:
            this.SecurityTypeDisabled = false
            this.getSecurityNo()
            break
        }
      }
    },
    // 参保地区选择
    createAreaChange (labels, selectedData) {
      // console.log(selectedData)
      this.formValidate.CityId = selectedData[selectedData.length - 1].id
      this.formValidate.CityName = selectedData[selectedData.length - 1].name
      // console.log(this.formValidate)
    },
    // 参保地区选择收起时
    createAreaVisibleChange (val) {
      // console.log(val)
      if (!val) {
        console.log(this.formValidate)
        this.SecurityTypeDisabled = false
        this.formValidate.InsuranceCode = ''
        this.getSecurityNo()
      } else {
        return false
      }
    },
    // 参保编号选择
    InsuranceCodeChange () {
      if (this.formValidate.InsuranceCode) {
        this.createBtnDis = false
      } else {
        this.createBtnDis = true
      }
    },
    createSecurityType () {
      this.securityTableData.unshift(
        Object.assign({ CustomerId: this.customerId }, this.formValidate)
      )
    },
    // 删除参保信息
    cancelSecurity (index) {
      this.securityTableData.splice(index, 1)
    },
    /**
     * 分级查询地区
     */
    loadDataCity (val, callback) {
      val.loading = true
      if (val.levelID === 2) {
        dataApi.getCity({ parentId: val.value }).then(res => {
          val.children = res.data.data.map(item => {
            return {
              ...item,
              label: item.name,
              value: item.id,
              children: []
              // loading: false
            }
          })
          val.loading = false
          callback()
        })
      } else {
      }
    },
    // 保存--参保信息
    stepSubmit () {
      if (this.securityTableData.length > 0) {
        dataApi.postInsuranceCode(this.securityTableData).then((res) => {
          if (res.data.success) {
            this.$Message.success(res.data.message)
            this.$emit('on-next', 6)
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 10,
              closable: true
            })
          }
        })
      } else {
        this.$Message.warning('请先添加参保信息')
      }
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
      // this.$refs['formValidate'].resetFields()
    }
  },

  watch: {
  },

}

</script>
<style lang='less' scoped>
  .d-flex{
    display: flex;
    align-items: center;
  }
  .position-relative{
    .license-img{
      width: 100%;
      height: 100%;
      cursor: pointer;
      line-height: 80px;
      text-align: center;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .img-close{
      position: absolute;
      top: -8px;
      right: -8px;
      z-index: 9;
      cursor: pointer;
    }
  }
</style>